<template>
    <div class="contion">
        <el-button type="primary" style="width:50px;margin:20px;" @click="back">返回</el-button>
        <p>
            <el-input v-model="input" placeholder="请输入搜索内容" class="input"/>
            <el-button type="primary" style="width:50px;margin-left:10px;" @click="getsearch">搜索</el-button>
        </p>
        <div v-for="(j,k) in data" :key="k" class="search">
            <img :src="j.image" style="width:200px; height:250px;">
            <span style="margin-left:60px;">{{ j.name }}</span>
        </div>
        <div class="search_2">
            <span><b>猜你想搜</b></span>
            <div class="search_3">
                <span>自学剪辑</span>
                <span>旅游攻略</span>
                <span>美食最多的城市</span>
                <span>剪辑教程</span>
                <span>白敬亭</span>
                <span>帅哥</span>
            </div>
        </div>
        <div class="search_4">
            <van-icon name="fire" size="20" color="#F52845"/>
            <span style="font-style: italic;color:#F52845"><b>小红书热点</b></span>
            <div class="search_5">
                <span style="color:#F52845"><b>1</b></span>
                <a :href="targetUrl1" target="_blank">五位“掌门人”发声 信息量巨大</a>
            </div>
            <div class="search_5">
                <span style="color:#FDB050"><b>2</b></span>
                <a :href="targetUrl2" target="_blank">两人花176元吃自助欲顺走20斤肉</a>
                <div class="search_5_1">热</div>
            </div>
            <div class="search_5">
                <span style="color:#FFDB48"><b>3</b></span>
                <a :href="targetUrl3" target="_blank">Manus创始人是中国90后</a>
                <div class="search_5_2">首发</div>
            </div>
            <div class="search_5">
                <span><b>4</b></span>
                <a :href="targetUrl4" target="_blank">雷军：成功来得猝不及防</a>
            </div>
            <div class="search_5">
                <span><b>5</b></span>
                <a :href="targetUrl5" target="_blank">巴黎世家2700元发卡义乌几块钱一斤</a>
            </div>
            <div class="search_5">
                <span><b>6</b></span>
                <a :href="targetUrl6" target="_blank">男子疑在海底捞往火锅里小便</a>
            </div>
            <div class="search_5">
                <span><b>7</b></span>
                <a :href="targetUrl7" target="_blank">新疆某地地震致3人死亡?假</a>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import http from '../http';
import { ElMessage } from 'element-plus';

const router = useRouter();

const targetUrl1 = "https://baijiahao.baidu.com/s?id=1825838116512959223";
const targetUrl2 = "https://baijiahao.baidu.com/s?id=1825844597581998687&wfr=spider&for=pc";
const targetUrl3 = "https://baijiahao.baidu.com/s?id=1825846830216417256&wfr=spider&for=pc";
const targetUrl4 = "https://baijiahao.baidu.com/s?id=1825847113411789869&wfr=spider&for=pc";
const targetUrl5 = "https://baijiahao.baidu.com/s?id=1825830413022714681&wfr=spider&for=pc";
const targetUrl6 = "https://baijiahao.baidu.com/s?id=1825833963047419173&wfr=spider&for=pc";
const targetUrl7 = "https://baijiahao.baidu.com/s?id=1825829690075277117&wfr=spider&for=pc";


const back = () => {
    router.back();
}

let input = ref('');

let data = ref([]);

const getsearch = async () => {
            try {
                const response = await http.get('/search', {
                    params: {
                        q: input.value
                    }
                });
                // 提取 hits 中的数据
                const hits = response.data.message.hits.hits;
                // 将 _source 中的数据存储到 data 中
                data.value = hits.map(hit => hit._source);
                console.log('Search results:', data.value);
            } catch (error) {
                console.error('Error fetching search results:', error);
            }
        };


</script>

<style scoped>
.contion{
    display: flex;
    flex-direction: column;
    justify-content: center;
    vertical-align: middle;
}
.input{
    width:240px;
    margin-left:60px;
    border:1px solid #000;
}

.search{
    display: flex;
    flex-direction: column;
    margin-top: 30px;
    margin-left:100px;
}

.search_2{
    color:#555555;
    font-size: 18px;
    margin-left: 40px;
    margin-top: 20px;
}

.search_3{
    display: flex;
    flex-wrap: wrap;
    grid-template-columns: repeat(2, 1fr); /* 根据需要调整列数 */
    display: grid;
    font-size: 15px;
}

.search_3 span{
    margin-top: 20px;
}

.search_4{
    margin-top: 20px;
    margin-left:40px;
}

.search_5{
    display: flex;
    flex-direction: row;
    width: 350px;
    height: 30px;
    margin-top: 15px;
    color:#555555;
    font-size: 15px;
    border-bottom: darkgray solid 1px;
    padding-bottom: 5px;
}

.search_5 span{
    margin-right: 10px;
}

.search_5 a{
    color: black;
}

.search_5_1{
    width: 13px;
    height: 13px;
    background-color:#FFA500;
    border-radius: 5px;
    margin-left: 10px;
    color: #fff;
    font-size: 12px;
    padding: 3px;
}

.search_5_2{
    width: 27px;
    height: 15px;
    background-color: #F52845;
    border-radius: 5px;
    margin-left: 10px;
    color: #fff;
    font-size: 12px;
    padding: 3px;

}
</style>